export const mapobj = {
    中国: 'china',
    廊坊市: 'langfang',
    河北: 'hebei',
    
}

export const heartMap = {
    backgroundColor: '#eee',
    geo: {
        map: 'china',
        roam: false,
        scaleLimit: {
            min: 1.2,
            max: 3,
        },
        // 设置地图的比例大小
        zoom: 1.2,
        // 图形上的文本标签，可用于说明图形的一些数据信息
        label: {
            normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)',
            },
        },
        // 地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
        itemStyle: {
        // normal 是图形在默认状态下的样式；
            normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
            },
            // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            emphasis: {
                areaColor: '#F3B329',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
        },
    },
    series: [
        {
            name: '信息量',
            type: 'map',
            // 这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai'
            mapType: 'china',
            geoIndex: 0,
        // data: dataList
        },
    ],
}
export const optionsmap = {
    backgroundColor: '#7b829f',
    tooltip: {},
    legend: {
        orient: 'vertical',
        left: 'right',
        data: [''],
    },
   
    selectedMode: 'single',
    series: [
        {
            name: '地图',
            type: 'map',
            map: 'Map',
            roam: true, // 是否可缩放
            zoom: 10, // 缩放比例
            geoIndex: 0,
        
            label: {
                normal: {
                    show: true, // 显示省份标签
                    textStyle: {
                        color: '#6b6b6b', // 省份标签字体颜色
                        fontSize: 12,
                    },
                },
                emphasis: {
                    // 对应的鼠标悬浮效果
                    show: true,
                    textStyle: {
                        // color: "#000",
                        color: '#6b6b6b',
                    },

                },
            },
        
            data: [],
        },
    ],
    // 添加geo 字段为地图添加样式 并且将 '南海诸岛' 隐藏
    /**
     * 隐藏 海南诸岛 配置完geo之后 需要在  series 设置   geoIndex:0,  代表 当前使用geo下的第0个索引对象配置  
     * 其实经过测试 不管索引是多少 都会以最后一个配置作为标准     
     * 
     */
    geo: [
        {
            // 地理坐标系组件
            map: 'china', // 重点
            roam: false, // 可以缩放和平移
            itemStyle: {
              
                normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
                        }],
                        globalCoord: false, // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, .3)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10,
                },
                emphasis: {
                    // 地图区域的高亮颜色
                    areaColor: '#008c8c',
                },
            },
                
            label: {
                normal: {
                    show: false, // 显示省份标签
                    textStyle: {
                        color: '#fff', // 省份标签字体颜色
                        fontSize: 12,
                    },
                },
                emphasis: {
                    // 对应的鼠标悬浮效果
                    show: true,
                    textStyle: {
                        // color: "#000",
                        color: '#6b6b6b',
                    },

                },
            },
            // 这里是重点！！！
            regions: [
                {
                    name: '南海诸岛',
                    itemStyle: {
                    // 隐藏地图
                        normal: {
                            opacity: 0, // 为 0 时不绘制该图形
                        },
                    },
                    label: {
                        show: false, // 隐藏文字
                    },
                },
            ],
            
        },
            
    ],
}

export function optionsMap(mapName:string, datas) {
    return {
        tooltip: {},
        legend: {
            orient: 'vertical',
            left: 'right',
            data: [''],
        },
           
        selectedMode: 'single',
        series: [
            {
                name: '地图',
                type: 'map',
                map: 'Map',
                roam: true, // 是否可缩放
                zoom: 10, // 缩放比例
                geoIndex: 0,
                
                label: {
                    normal: {
                        show: true, // 显示省份标签
                        textStyle: {
                            color: '#6b6b6b', // 省份标签字体颜色
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        // 对应的鼠标悬浮效果
                        show: true,
                        textStyle: {
                            // color: "#000",
                            color: '#6b6b6b',
                        },
        
                    },
                },
                
                data: datas,
            },
        ],
        // 添加geo 字段为地图添加样式 并且将 '南海诸岛' 隐藏
        /**
             * 隐藏 海南诸岛 配置完geo之后 需要在  series 设置   geoIndex:0,  代表 当前使用geo下的第0个索引对象配置  
             * 其实经过测试 不管索引是多少 都会以最后一个配置作为标准     
             * 
             */
        geo: [
            {
                // 地理坐标系组件
                map: mapName, // 重点
                roam: false, // 可以缩放和平移
                itemStyle: {
                      
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, .3)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10,
                    },
                    emphasis: {
                        // 地图区域的高亮颜色
                        areaColor: '#008c8c',
                    },
                },
                        
                label: {
                    normal: {
                        show: false, // 显示省份标签
                        textStyle: {
                            color: '#fff', // 省份标签字体颜色
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        // 对应的鼠标悬浮效果
                        show: true,
                        textStyle: {
                            // color: "#000",
                            color: '#6b6b6b',
                        },
        
                    },
                },
                // 这里是重点！！！
                regions: [
                    {
                        name: '南海诸岛',
                        itemStyle: {
                            // 隐藏地图
                            normal: {
                                opacity: 0, // 为 0 时不绘制该图形
                            },
                        },
                        label: {
                            show: false, // 隐藏文字
                        },
                    },
                ],
                    
            },
                    
        ],
    }
}  

// 热力图配置
export function heartMapOptions(mapName:string, datas:[], json:any):Object {
    // 配置
    let max = 480; let min = 9 // todo
    let maxSize4Pin = 100; let minSize4Pin = 20
    let geoCoordMap = {}
    // 1. 载入地图类型
    let pcdatas = json.features
    // 2. 获取 每个地区的坐标
    pcdatas.forEach(cp => {
        let name = cp.properties.name
        geoCoordMap[name] = cp.properties.cp
    })
    // 4. 格式化数据
    let convertData = function (data:any) {
        let res:Array<{name:String, value:any}> = []
        for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name]
  
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                })
            }
        }
        return res
    }
    let optionMap = {
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        }, 
        visualMap: {
            show: false,
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], 
            calculable: true,
            seriesIndex: [1],
            inRange: {
                color: ['#F3B329', '#EA0000'], 

            },
        },
        geo: {
            show: true,
            map: mapName,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            roam: true,
            itemStyle: {
                // normal 是图形在默认状态下的样式；
                normal: {
                    borderColor: '#FED88D',
                    areaColor: '#7B829F',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
                // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                emphasis: {
                    areaColor: '#F3B329',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
 
            {
                name: '散点',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(datas),
                symbolSize(val) {
                    return val[2] / 10
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true,
                    },
                    emphasis: {
                        show: true,
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#666',
                    },
                },
            },
 
            {
                type: 'map',
                map: 'china',
                geoIndex: 0,
                aspectScale: 0.75, 
                showLegendSymbol: false, 
                label: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    },
                },
    
                animation: false,
                data: datas,
            },
  
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin', 
                symbolSize(val) {
                    let a = (maxSize4Pin - minSize4Pin) / (max - min)
                    let b = minSize4Pin - a * min
                    b = maxSize4Pin - a * max
                    return a * val[2] + b
                },
    
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 9,
                        },
                        formatter: '{@[2]}',
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#F62157', 
                    },
                },
                zlevel: 1,
                data: convertData(datas),
            },
  
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(datas.sort((a, b) => b.value - a.value).slice(0, 5)),
                symbolSize(val) {
                    return val[2] / 10
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke',
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true,  
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#008c8c',
                        shadowBlur: 10,
                        shadowColor: 'yellow',
                    },
                },
                zlevel: 1,
            }],
    }
    return optionMap
}
